Title: Adding the User Avatar to the My Account Page

Publish Date: Fri, 26 Dec 2014 10:43:20 +0000

Categories: Uncategorized

Content:

Adding a customer avatar to the My Account page has become a popular and visually engaging feature in many themes.



Recognizing its value, I've crafted a tutorial to integrate this functionality into any other theme. Following this guide, you can enhance the user experience by incorporating a personal touch to the My Account section.







What is Gravatar?



For those who don't yet have a Gravatar account, I recommend setting one up. It's widely used across numerous websites, especially those powered by WordPress (including this one). This integration not only adds a personalized touch but also ensures a consistent visual identity across various platforms.



Adding the User Avatar on My Account





Open up your functions.php file located in wp-content/themes/your-child-theme-name/ and add this code to it:




https://gist.github.com/SiR-DanieL/0f0ba74665c07d2d4926699cf6c21d66




Customize the Avatar with CSS



The avatar is showing, but it doesn't look quite good yet. Add this custom CSS code to your site:




https://gist.github.com/SiR-DanieL/d965ea459a2e1e9ea3e4a6607373de81




The first code adds the Gravatar to the My Account page. The avatar shows either before or after the welcome message, depending on the theme.



To improve its look, add the custom CSS to move the avatar to the left of the welcome message and add a border to its right.



The page should now look like this on the theme TwentyTwentyone:







Feel free to further tweak the CSS. This is a simple example of what you can do, but the options are limitless. You can change everything and move the avatar wherever you want to.
